<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head">
</head>

<body>
<div class="layui-row">
    <button onclick="edit('');" class="layui-btn layui-btn-sm">添加SSH</button>
</div>
<table class="layui-table" id="table" lay-filter="table" style="margin: 0;"></table>

</body>

<script type="text/html" id="bar_monitor">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal"
       lay-event="update">编辑</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm  layui-btn-warm" lay-event="terminal">终端</a>
    {{# if(d.fileDirs){ }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm  layui-btn-warm" lay-event="files">文件</a>
    {{# } }}
</script>
<script type="text/html" id="node_templet">
    {{# if(d.nodeModel){  }}
    <a style="color: blue;" th:url="@{${session.jpomProxyPath}+'/node/index.html?nodeId={{d.nodeModel.id}}'}"
       onclick="goNode(this);">
        {{ d.nodeModel.name }}
        <i style="font-size: 10px;" class="layui-icon layui-icon-next"></i>
    </a>
    {{# }else{ }}
    <a style="color: #5FB878;" onclick='install("{{d.id}}")'>
        安装
        <i style="font-size: 10px;" class="layui-icon layui-icon-upload"></i>
    </a>
    {{# } }}
</script>
<script type="text/javascript">
    var col = [
        {field: 'name', title: '名称'},
        {
            field: 'nodeId', title: '关联节点', templet: "#node_templet"
        },
        {field: 'host', title: 'host'},
        {field: 'user', title: 'user'},
        {field: 'port', title: 'port'},
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar_monitor', fixed: 'right'}
    ];

    function goNode(t) {
        top.layer.msg('加载节点中..', {
            icon: 16,
            shade: 0.2,
            time: 100000000
        });
        top.location.href = $(t).attr("url");
    }

    function loadSuccess() {
        tableRender({
            id: 'table',
            elem: '#table',
            url: './list_data.json',
            cols: [col]
        });

        // 表格工具条事件
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('update' === event) {
                // 修改
                edit(data.id);
            } else if ('terminal' === event) {
                tabChange({
                    id: data.id,
                    url: './node/ssh/terminal.html?id=' + data.id,
                    title: data.name + ' - 终端',
                });
            } else if ('files' === event) {
                tabChange({
                    id: data.id,
                    url: './node/ssh/file.html?id=' + data.id,
                    title: data.name + ' - 文件',
                });
            }
        });
    }

    // 编辑监控
    function edit(id) {
        layerOpen({
            type: 2,
            title: '编辑ssh',
            content: './edit.html?id=' + id,
            area: ['80%', '80%'],
        });
    }

    function install(id) {
        layerOpen({
            type: 2,
            title: '安装插件端',
            content: './installAgent.html?id=' + id,
            area: ['60%', '80%'],
        });
    }

</script>
</html>
